<template>
  <div v-if="show_list">
    <div class="list-container" v-if="data != undefined && data.length > 0" ref="listContainer" @scroll="handleScroll">
      <div class="list-item" v-for="(item, index) in data" :uuid="item[uuidkey]" :key="index">
        <div class="category">{{ title1 }}:{{ item[parameter1] }}</div>
        <div class="title">{{ title2 }}:{{ item[parameter2] }}</div>
        <div class="time">{{ title3 }}:{{ item[parameter3] }}</div>
        <div class="buttons">
          <button @click="func1(item)"  style="vertical-align: middle;">{{ func1_txt }}</button>
          <button @click="func2(item)"  style="vertical-align: middle;">{{ func2_txt }}</button>
        </div> 
      </div>
      <div class="load-more-observer"></div>
    </div>
    <div v-else class="list-else list-container">
      <h3 @click="clock_box" @mousemove="tip_close">暂无数据</h3>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, onMounted, onUnmounted,watch } from 'vue';
import { success } from "../../static/js/alert.js";

const props = defineProps({
  show_list: {
    type: Boolean,
    required: true,
  },
  uuidkey: {
    type: String,
    required: true,
  },
  data: {
    type: Array,
    required: true,
  },
  title1: {
    type: String,
    required: true,
  },
  parameter1: {
    type: String,
    required: true,
  },
  title2: {
    type: String,
    required: true,
  },
  parameter2: {
    type: String,
    required: true,
  },
  title3: {
    type: String,
    required: true,
  },
  parameter3: {
    type: String,
    required: true,
  },
  func1: {
    type: Function,
    required: true,
  },
  func2: {
    type: Function,
    required: false,
  },
  func1_txt: {
    type: String,
    required: true,
  },
  func2_txt: {
    type: String,
    required: true,
  },
  loadMore: {
    type: Function,
    required: true,
  },
});
watch(() => props.data, (newValue, oldValue) => {
  if (newValue.length < 10) { 
    props.loadMore();
  }
})

const emit = defineEmits(['show_list_close']);
const listContainer = ref(null);
function handleClickOutside(event) {
  if (listContainer.value && !listContainer.value.contains(event.target)) {
    clock_box();
  }
}

function handleScroll() {
  if (listContainer.value) {
    const { scrollTop, scrollHeight, clientHeight } = listContainer.value;
    if (scrollTop + clientHeight >= scrollHeight -5) {
      props.loadMore();
    }
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});

function clock_box() {
  emit('show_list_close', false);
}

function tip_close() {
  success('点击收起!');
}
</script>

<style scoped>
.list-container {
  width: 80vw;
  position: absolute;
  left: 0px;
  top: 50px;
  margin-left: 0 auto;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  height: 500px;
  overflow: scroll;
  z-index: 100;
}

.list-else > h3 {
  text-align: center;
  margin-top: 200px;
}

.list-container::-webkit-scrollbar {
  width: 12px;
}
.list-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.list-container::-webkit-scrollbar-thumb {
  width: 12px;
  background: #888;
  border-radius: 5px;
}
.list-container::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border-bottom: 1px solid #ddd;
  flex-wrap: wrap;
}
.list-item:last-child {
  border-bottom: none;
}
.list-item:nth-child(odd) {
  background-color: #e9ecef;
}
.list-item:nth-child(even) {
  background-color: #f8f9fa;
}
.list-item .category,
.list-item .title,
.list-item .time {
  margin: 5px 0;
}
.list-item .category {
  width: 120px;
  color: #555;
  font-size: 16px;
}
.list-item .title {
  font-size: 18px;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-item .time {
  color: #999;
  font-size: 0.9em;
}
.list-item .buttons button {
  padding: 8px 12px;
  margin-right: 10px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: beige;
  cursor: pointer;
}
.list-item .buttons button:last-child {
  margin-right: 0;
}
.list-item .buttons button:hover {
  background-color: #0056b3;
}
.load-more-observer {
  height: 20px;
  width: 100%;
  background-color: transparent;
}
</style>